<template>
  <div class="horv-sreen-layout">
    <!-- <div class="layout-header">
      <moduleHeader :active="1"
                    layoutHeight="0.4rem"
                    :buttonGroup="buttonGroup"
                    @handleMenu="handleMenu"
                    :headerStyle="{ height: '0.72rem' }"
                    :leftStyle="{ height: '100%', width: '5.2rem' }"
                    :titleStyle="{ lineHeight: '0.72rem', fontSize: '0.32rem' }"
                    :buttonViewStyle="{
          height: '0.72rem',
          lineHeight: '0.72rem',
          fontSize: '0.16rem',
          paddingTop: '0.15rem',
        }"
                    :buttonStyle="{ height: '0.4rem', padding: '0 0.2rem' }"
                    :timeStyle="{ fontSize: '0.16rem' }"
                    :rightStyle="{ top: '0.35rem' }">
      </moduleHeader>
    </div> -->
    <!-- v-bind="chartData" -->
    <!-- {{ chartData }} -->
    <div class="layout-content">
      <moduleOverView height="9.3rem"
                      :overviewData="overviewData"
                      :overviewDataWarning="overviewDataWarning">
      </moduleOverView>
    </div>
  </div>
</template>

<script setup>
import { computed, onMounted, onBeforeUnmount, ref } from "vue";
import moduleHeader from "@/components/vpt-base-header-1002/index.vue";
import moduleOverView from "./component/over-view/indexnew.vue";
import moduleMonitoring from "./component/monitoring/index.vue";
import { usePeriodicRequest } from "@/utils/usePeriodicRequest.js";
import {
  getIPSelectData,
  getOverviewDatanew,
  getLineChartData,
} from "@/api/mockApi/infrastructure.js";
import { useRouter } from "vue-router";
import dataWarning from "../../mock/data/infrastructure/zlxxwarning.json"
import { buttonGroup } from "@/router/data.js";

const router = useRouter();

// const buttonGroup = ref([
//   { id: 1, name: "总览", path: "/horvsreen", disabled: false },
//   { id: 2, name: "基础设施监控", path: "/infrastructure", disabled: false },
//   { id: 3, name: "应用监控", path: "/application", disabled: false },
// ]);

const handleMenu = (item) => {
  router.push({ path: item.path });
};
const chartType = ref("init");
const overviewData = ref([]);
const overviewDataWarning = ref([]);
//获取数据总览
const getOverview = (params = {}) => {
  getOverviewDatanew(params).then((res) => {
    // overviewData.value = res.data || [];
    overviewData.value = res.data.map((item) => {
      return {
        ...item,
        info: JSON.parse(item.info),
      };
    });
  });
  // getOverviewDataWarning(params).then((res) => {
  // overviewData.value = res.data || [];
  overviewDataWarning.value = dataWarning.data.map((item) => {
    return {
      ...item,
      info: JSON.parse(item.info),
    };
    // });
  });
};

// tabs数据
const defaultTabs = ref("01");
const changeTab = (value) => {
  defaultTabs.value = value;
  getIPSelect();
  lineChart.stopFetching();
  chartType.value = "init";
  lineChart.updateParams({
    type: defaultTabs.value,
    ip: defaultValue.value,
  });
  lineChart.startFetching();
};

// select数据
const defaultValue = ref("");
const ipSelectData = ref([]);
const onChangeSelect = (value) => {
  defaultValue.value = value;
  lineChart.stopFetching();
  chartType.value = "init";
  lineChart.updateParams({
    type: defaultTabs.value,
    ip: defaultValue.value,
  });
  lineChart.startFetching();
};

// 获取ip下拉数据
const getIPSelect = (params = { bh: defaultTabs.value }) => {
  getIPSelectData(params).then((res) => {
    ipSelectData.value = res.data?.length
      ? res.data.map((item) => ({
        label: item.app_ip || "",
        value: item.app_ip || "",
      }))
      : [];
    defaultValue.value = ipSelectData.value[0].value;
    lineChart.stopFetching();
    chartType.value = "init";
    lineChart.updateParams({
      type: defaultTabs.value,
      ip: defaultValue.value,
    });
    lineChart.startFetching();
  });
};

const monitoringData = ref([]);

// 获取监控数据chart
const getLineChart = (params) => {
  getLineChartData(params).then((res) => {
    monitoringData.value = res.data || [];
    setTimeout(() => {
      chartType.value = "update";
    }, 0);
  });
};

const lineChart = usePeriodicRequest(getLineChart, 300000, {
  type: defaultTabs.value,
  ip: defaultValue.value,
});

const overviewList = usePeriodicRequest(getOverview, 3000);

onMounted(() => {
  getIPSelect();
  overviewList.startFetching();
});

// 在组件卸载时停止请求
onBeforeUnmount(() => {
  lineChart.stopFetching();
  overviewList.stopFetching();
});
</script>

<style lang="less" scoped>
.layout-content {
  padding: 0.2rem 0.2rem 0 0.2rem;
  .moduleMonitorin {
    margin-top: 0.16rem;
    height: 2.68rem;
  }
}
</style>
